<template>
  <div>
    <!-- 用户登录 -->
    <div class="user-bar-container frsbc">
      <div class="user-bar frsc">
        <img class="avatar" :src="avatar" alt="">
        <router-link class="login-btn" to="login">点击登录</router-link>
      </div>
      <div class="invite frec"><span class="share">邀请好友</span><img class="arrow" :src="arrowRight"></div>
    </div>
    <!-- 订单bar -->
    <div class="frac bgff order-bar bteb">
      <router-link class="order-item fccc" tag="div" v-for="(item, index) in order" :key="index" to="item.url">
        <i class="order-icon" :class="'order-icon'+index"></i>
        <span class="desc">{{item.desc}}</span>
      </router-link>
    </div>
    <!-- 物流信息 -->
    <div class="bgff logistics-product-container bbeb">
      <div class="logistics-product">
        <div class="frsbc logistics-top">
          <span>最新物流</span>
          <span>09-09</span>
        </div>
        <div class="frsc">
          <img class="product-img" :src="productImg" alt="">
          <div class="fccs">
            <div class="frsc charge-container">
              <img class="charge" :src="gou">
              <span class="charge-text">已签收</span>
            </div>
            <p class="location">广东省地质啊</p>
          </div>
        </div>
      </div>
    </div>
    <!-- text-arrow -->
    <div class="fccc text-arrow-container">
      <me-text-arrow v-for="(item, index) in textArray" @click-bar="goToDestination" :key="index" :text-array="item"></me-text-arrow>
    </div>
    <div class="space"></div>
  </div>
</template>

<script>
import MeTextArrow from '@/components/MeTextArrow'
export default {
  components: {
    MeTextArrow
  },
  data () {
    return {
      avatar: require('@/common/image/home-single-product.png'),
      productImg: require('@/common/image/home-single-product.png'),
      arrowRight: require('@/common/image/arrow-right.png'),
      gou: require('@/common/image/qianshou.png'),
      // 订单icon
      order: [
        {url: 'pay', icon: require('@/common/image/1.png'), desc: '待付款'},
        {url: 'send', icon: require('@/common/image/2.png'), desc: '待发货'},
        {url: 'get', icon: require('@/common/image/3.png'), desc: '待收货'},
        {url: 'comment', icon: require('@/common/image/4.png'), desc: '待评价'},
        {url: 'reback', icon: require('@/common/image/5.png'), desc: '退款/售后'}
      ],
      textArray: [
        {text: '我的收藏', url: ''},
        {text: '成为分销商', url: ''},
        {text: '会员卡', url: ''},
        {text: '我的积分', url: ''},
        {text: '我的优惠券', url: '/mycoupon'},
        {text: '我的地址', url: ''},
        {text: '联系客户', url: ''},
        {text: '设置', url: ''}
      ]
    }
  },
  methods: {
    goToDestination () {
      console.log('点击了')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~common/stylus/variable.styl'
@import '~common/stylus/mixin.styl'
.user-bar-container
  padding-bottom .28rem
  background-color $theme-color
.user-bar
  width 100vw
  height 1.92rem
.avatar
  margin 0 .20rem
  height 1.20rem
  width 1.20rem
  border-radius(1.20rem)
.login-btn
  font-size .32rem
  color $cff
.invite
  width 2.86rem
  height .68rem
  line-height .68rem
  border-top-left-radius .60rem
  border-bottom-left-radius .60rem
  text-align center
  font-size .28rem
  color $c33
  background $cff
.share
  margin-right .30rem
.arrow
  width .30rem
  height .30rem

.order-bar
  margin-top .20rem
  padding 0 .20rem
  font-size .24rem
.order-item
  flex-shrink 0
  width 1.40rem
  height 1.40rem
  &:hover
    background $ceb
.order-icon
  height .60rem
  width .60rem
.order-icon0
  background url('~@/common/image/1.png') no-repeat center center
  background-size .60rem .60rem
.order-icon1
  background url('~@/common/image/2.png') no-repeat center center
  background-size .60rem .60rem
.order-icon2
  background url('~@/common/image/3.png') no-repeat center center
  background-size .60rem .60rem
.order-icon3
  background url('~@/common/image/4.png') no-repeat center center
  background-size .60rem .60rem
.order-icon4
  background url('~@/common/image/5.png') no-repeat center center
  background-size .60rem .60rem
.desc
  height .40rem
  line-height .40rem

// 物流
.logistics-product-container
  margin-bottom .20rem
  padding 0 .20rem .30rem
.logistics-product
  padding .20rem .30rem .10rem
  font-size .22rem
  background-color $cf8
.logistics-top
  margin-bottom .16rem
  color $c65
.product-img
  margin-right .30rem
  height .80rem
  width .80rem
  border-radius(.04rem)
.charge-container
  margin-bottom .16rem
.charge
  margin-right .10rem
  height .22rem
  width .22rem
.charge-text
  color $theme-color
.location
  color $c65
</style>
